<template>
  <div class="bg" ref="fixeHeight">
    <div class="info-container">
      <div class="tips-bg">
        <div
          class="flex flexC flexCentrer flexwarp"
          :class="getStatus(listData as any) =='待支付'&&appBtn?'tips-bg-title-active':'tips-bg-title'"
        >
          <div class="flex">
            <img class="tips-bg-title-icon" src="../../assets/order/wait.png" />
            <div class="txt">{{ getStatus(listData as any) }}</div>
          </div>
          <div
            class="txt timer flex flexC flexCentrer"
            v-if="getStatus(listData as any) =='待支付'&&appBtn"
          >
            <div>请在</div>
            <nut-countdown
              :end-time="timeDifference(listData.create_time)"
              @on-end="handelEnd"
            ></nut-countdown>
            <div>内完成支付</div>
          </div>
        </div>
      </div>
      <div class="wrap-content">
        <div class="wrap-content-title">
          {{ listData?.logistics_type == 1 ? "快递" : "顾客自提" }}
        </div>
        <nut-divider style="color: #eeeeee" />
        <KUIDI
          v-if="listData?.logistics_type == 1"
          :data="listData"
          @useopen="editUseBtn"
          @markopen="handleMarkopen"
          @openkui="kuiBtn"
        />
        <ZITI
          v-if="listData?.logistics_type == 2"
          :data="listData"
          @open="editBtn"
          @markopen="handleMarkopen"
        />
      </div>
      <div class="wrap-content">
        <div class="card">
          <div class="card-top">
            <div class="card-info-top flex flexBetween">
              <div class="flex flexC f1">
                <nut-image
                  radius="50"
                  style="width: 30px; height: 30px"
                  class="nutImg"
                  showError
                  :src="listData?.organizer_avatar"
                >
                  <template #error>
                    <nut-image
                      radius="10"
                      class="nutImg"
                      showError
                      src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
                    />
                  </template>
                </nut-image>
                <div class="name">{{ listData?.organizer_nickname }}</div>
              </div>
              <div class="flex flexC">
                <div class="txt ellipsis w140" style="text-align: right">
                  {{ listData?.title }}
                </div>
                <nut-icon name="rect-right" style="color: #999"></nut-icon>
              </div>
            </div>
            <nut-divider style="color: #eeeeee" />
            <div
              class="card-info"
              v-if="listData?.goods_list && listData?.goods_list.length > 0"
              v-for="(item, inx) in listData?.goods_list"
              :key="inx"
            >
              <div class="content flex flexBetween flexC">
                <div class="flex flexC">
                  <!-- <nut-image
										radius="10"
										class="nutImg"
										:src="listData?.url + item?.image"
									/> -->
                  <nut-image
                    radius="10"
                    class="nutImg"
                    showError
                    :src="listData?.url + item.image"
                  >
                    <template #error>
                      <nut-image
                        radius="10"
                        class="nutImg"
                        showError
                        src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
                      />
                    </template>
                  </nut-image>
                  <div class="info">
                    <div class="info-title ellipsis">{{ item.goods_name }}</div>
                    <div class="info-tips">规格：{{ item.spec }}</div>
                  </div>
                </div>
                <div class="money">
                  <div class="money-box">
                    <span class="m-icon">¥</span><span>{{ item.money }}</span>
                  </div>
                </div>
              </div>
              <div class="flex flexC">
                <div class="nutImg" style="height: 0"></div>
                <div class="info-tips-nums info">共{{ item.quantity }}件</div>
              </div>
            </div>

            <div class="flex flexC flexBetween" style="padding-top: 10px">
              <div class="name">商品金额</div>
              <div class="money">
                <div class="money-box">
                  <span class="m-icon">¥</span
                  ><span>{{ listData?.total_money }}</span>
                </div>
              </div>
            </div>
            <nut-divider style="color: #eeeeee" />
            <div class="flex flexC flexEnd bootm-txt">
              <div class="flex flexC">
                <div>共2件</div>
                <div style="padding: 0 10px 0 10px">实际支付:</div>
                <div class="money" style="color: #f55726; font-weight: bold">
                  <div class="money-box">
                    <span class="m-icon">¥</span
                    ><span>{{ listData?.total_money }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrap-content">
        <div class="wrap-content-title">订单信息</div>
        <nut-divider style="color: #eeeeee; margin: 10px 0 !important" />
        <div class="flex flexC order-info-box">
          <div class="order-item">跟团号:</div>
          <div class="order-item-title">
            {{ listData?.follow_number || "无" }}
          </div>
        </div>
        <div class="flex flexC order-info-box">
          <div class="order-item">下单人:</div>
          <div class="order-item-title flex flexC">
            <nut-image
              style="width: 20px; height: 20px"
              radius="50"
              class="nutImg"
              showError
              :src="listData?.avatar"
            >
              <template #error>
                <nut-image
                  radius="10"
                  class="nutImg"
                  showError
                  src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
                />
              </template>
            </nut-image>
            <div style="padding-left: 10px">
              {{ listData?.nickname || "无" }}
            </div>
          </div>
        </div>
        <div class="flex flexC order-info-box">
          <div class="order-item">订单编号:</div>
          <div class="order-item-title">{{ listData?.order_no || "无" }}</div>
        </div>
        <div class="flex flexC order-info-box">
          <div class="order-item">支付时间:</div>
          <div class="order-item-title">{{ listData?.pay_time || "无" }}</div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footer-box">
      <STATUSBTN
        v-if="appBtn"
        :type="listData.type"
        :data="listData"
        @confirm="confirm"
        @refound="refound"
      />
    </div>
    <ADDSELFMODEL ref="addRef" @save="handleSave" />
    <ADDUSER ref="useRef" @reFresh="handResh" />
    <ADDKUIDI ref="kuidiRef" @saveEms="handleEms" />
    <tip-dialog
      ref="tipDialogRef"
      @confirm="handleConfirm"
      :isAutoClose="false"
    >
      <template #title>
        <div class="dialog-title">修改备注</div>
      </template>

      <template #default>
        <div class="dialog-content">
          <div class="text-line first-line">
            <nut-form :model-value="formData" :rules="rules" ref="ruleForm">
              <nut-form-item prop="organizer_remark">
                <div class="flex">
                  <div style="color: #000000; width: 50px">备注:</div>
                  <div style="padding-left: 20px">
                    <input
                      class="nut-input-text"
                      v-model="formData.organizer_remark"
                      placeholder="请输入备注"
                      maxlength="100"
                      type="text"
                    />
                  </div>
                </div>
              </nut-form-item>
            </nut-form>
          </div>
        </div>
      </template>

      <template #cancel>取消</template>
      <!-- <template #beforeConfirm>保存</template> -->
    </tip-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";
import ADDSELFMODEL from "./model/addSelfModel.vue";
import ADDUSER from "./model/addUser.vue";
import useOrderInfo from "@/composable/order/useOrderInfo";
import KUIDI from "./components/kuaidi.vue";
import ZITI from "./components/ziti.vue";
import useOrderManage from "@/composable/manage/useOrderMange";
import TipDialog from "@/components/Dialog/index.vue";
import ADDKUIDI from "./model/addKuiDi.vue";
import useRemark from "@/composable/remark/useRemark";
import STATUSBTN from "@/components/orderStatusCard/orderStatus.vue";
import useOrderOrderManage from "@/composable/order/useOrder";
const { listData, getStatus } = useOrderInfo();
const {
  addRef,
  useRef,
  hasSave,
  reFresh,
  editBtn,
  editUseBtn,
  fixeHeight,
  kuiBtn,
  kuidiRef,
} = useOrderManage();
const { confirm, refound } = useOrderOrderManage(listData);
const appBtn = ref<boolean>(true);
const timeDifference = (time: any) => {
  //传入约定时间
  let new_date: any = new Date(); //新建一个日期对象，默认现在的时间
  let old_date: any = new Date(time.replace(new RegExp(/-/gm), "/")); //将约定时间转换为"yyyy-MM-dd HH:mm:ss"格式化日期
  console.log(Date.parse(old_date));
  if (old_date - new_date <0) {
    return Date.parse(old_date) + 60 * 10000;
  } else {
    return 0;
  }
};

const handleSave = (n: any) => {
  hasSave(n);
  listData.value.place_name = n.newdata.place_name;
  listData.value.city_province = n.newdata.city_province;
  listData.value.contact_person = n.newdata.contact_person;
  listData.value.contact_phone = n.newdata.phone;
};
const handResh = (n: any) => {
  reFresh();
  listData.value.rec_name = n.newdata.rec_name;
  listData.value.rec_phone = n.newdata.rec_phone;
  listData.value.rec_location = n.newdata.rec_location;
  listData.value.rec_address = n.newdata.rec_address;
};
const { tipDialogRef, editMarkBtn, formData, rules, ruleForm, handleConfirm } =
  useRemark(listData, true);
const handleMarkopen = (n: any) => {
  editMarkBtn(n);
};
const handleEms = (n: any) => {
  listData.value.express_company = n.formData.express_company;
  listData.value.express_num = n.formData.express_num;
};
const handelEnd = () => {
  appBtn.value = false;
};
</script>
<style scoped lang="scss">
.bg {
  background: #f6f8f8;
  height: 100%;
  .tips-bg {
    position: relative;
    width: 100%;
    height: 284px;
    background: url("../../assets/order/tip_bg.png") no-repeat center;
    background-size: 100% 100%;
    text-align: center;

    .tips-bg-title-icon {
      display: block;
      width: 40px;
      height: 48px;
    }

    .tips-bg-title {
      height: 200px;
      font-size: 36px;
      font-weight: 600;
      color: #fff;
      .txt {
        padding-left: 22px;
      }
    }
    .tips-bg-title-active {
      padding-top: 50px;
      font-size: 36px;
      font-weight: 600;
      color: #fff;
      .txt {
        padding-left: 22px;
      }
    }
  }
  .wrap-content {
    position: relative;
    top: -80px;
    background: #fff;
    border-radius: 20px;
    margin: 0 20px;
    padding: 26px 20px;
    margin-bottom: 20px;
    .order-item {
      min-width: 130px;
      font-size: 26px;
      color: #999999;
    }
    .order-info-box {
      padding-bottom: 10px;
    }
    .order-item-title {
      font-size: 26px;
      color: #333333;
    }
  }
  .wrap-content-title {
    font-size: 30px;
    font-weight: 500;
    color: #000;
  }
}
.card-address {
  margin: 20px 0;
  background: #fff;
  padding: 20px 20px;
  .item-txt {
    color: #000000;
    font-size: 26px;
    font-weight: bold;
    padding-bottom: 5px;
  }
  .item-info {
    font-size: 24px;
    padding: 5px 0;
  }
  .p-l-10 {
    padding-left: 10px;
  }
  .p-r-10 {
    padding-right: 10px;
  }
  .item-txt-icon {
    display: block;
    width: 24px;
    height: 24px;
  }
  .item-txt-icon-p {
    display: block;
    width: 24px;
    height: 28px;
  }
  .edit {
    font-size: 24px;
    color: #999;
    padding: 20px 0;
  }
}
.card {
  background: #fff;
  width: auto;
  margin-bottom: 20px;
  border-radius: 20px;

  .chose {
    width: 36px;
    height: 36px;
    margin-right: 18px;
  }
  .card-top-title-text {
    font-weight: 500;
    font-size: 32px;
  }

  .cF55726 {
    color: #f55726;
  }

  .p-l-10 {
    padding-left: 10px;
  }

  .status {
    color: #26acf5;
    font-size: 28px;
  }

  .card-date {
    color: #999;
    font-size: 22px;
  }
  .card-info {
  }

  .name {
    font-size: 28px;
    color: #000;
    font-weight: 500;
    padding-left: 10px;
  }
  .txt {
    font-size: 28px;
    color: #000;
  }
  .w140 {
    width: 226px;
  }
  .content {
    padding-top: 18px;
    .img-item-title {
      color: #000000;
      font-size: 26px;
      text-align: center;
    }
    .img-item-num {
      color: #999999;
      font-size: 24px;
      text-align: center;
    }
  }
  .info {
    width: 332px;
    font-size: 28px;
    padding-left: 20px;
    .info-title {
      font-weight: 500;
      color: #000000;
    }
    .info-tips {
      font-size: 24px;
      font-weight: 400;
      color: #999999;
    }
  }
  .info-tips-nums {
    color: #666666;
    font-size: 24px;
  }
  .nutImg {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 20px;
  }

  .info-num {
    font-size: 22px;
    font-weight: 400;
    color: #999999;
    text-align: right;
  }
  .t-a-c {
    text-align: center;
  }
  .money {
    font-size: 28px;
    color: #000;
    font-weight: bold;
    text-align: center;
    .m-icon {
      font-size: 20px;
      padding-right: 10px;
    }
  }
  .img-item {
    margin-right: 20px;
  }

  .card-address {
    margin: 20px 0;
    background: #f7f8f9;
    padding: 20px 20px;
    .item-txt {
      color: #000000;
      font-size: 26px;
      font-weight: bold;
      padding-bottom: 5px;
    }
    .item-info {
      font-size: 24px;
      padding: 5px 0;
    }
    .p-l-10 {
      padding-left: 10px;
    }
    .p-r-10 {
      padding-right: 10px;
    }
    .item-txt-icon {
      display: block;
      width: 24px;
      height: 24px;
    }
    .item-txt-icon-p {
      display: block;
      width: 24px;
      height: 28px;
    }
    .edit {
      font-size: 24px;
      color: #999;
      padding: 20px 0;
    }
  }
  .bootm-txt {
    font-size: 26px;
    color: #666666;
  }
}
.info-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 100px;
  overflow: auto;
}
.footer-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  padding: 10px 30px;
  background: #fff;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.btn-box {
  padding: 20px 0 50px 0;
  .btn {
    float: right;
    width: 146px;
    font-size: 26px;
    font-weight: 400;
    color: #40ae36;
    border: 2px solid #40ae36;
    background: #f9fffa;
    text-align: center;
    border-radius: 50px;
    padding: 10px 0;
  }
  .dbtn {
    float: right;
    width: 146px;
    font-size: 26px;
    font-weight: 400;
    color: #40ae36;
    border: 2px solid #40ae36;
    background: #f9fffa;
    text-align: center;
    border-radius: 50px;
    padding: 10px 0;
  }
  .db0 {
    margin-right: 20px;
    color: #000;
    border: 2px solid #999;
  }
}
.dialog-title {
  font-size: 36px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #000000;
  line-height: 50px;
  margin: 36px 0 30px 0;
}
.dialog-content {
  box-sizing: border-box;
  padding: 0 50px;
  margin-bottom: 61px;

  .text-line {
    font-size: 30px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #000000;
    line-height: 42px;
    text-align: left;
  }

  .first-line {
  }
  .second-line {
    margin-top: 40px;

    .link {
      color: #40ae36;
    }
  }
}

.timer {
  width: 100%;
}
:deep(.nut-cd-block) {
  font-size: 36px;
}
</style>
